<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport"
      content="width=device-width, initial-scale=1.0 user-scalable=no,initial-scale=1.0,maximum-scale=1">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Canvas 画板</title>
   <style>
      * {
         margin: 0;
         padding: 0;
      }

      body {
         overflow: hidden;
      }

      canvas {
         background: aliceblue;
         cursor:url('./img/pen_ico.ico'),auto
      }

      .select {
         display: flex;
         justify-content: center;
         background: #eee;
      }

      .imgpic {
         bottom: 30px;
         position: absolute;
      }

      .color_list {
         position: absolute;
         left: 20px;
         text-align: center;
      }

      .pen_list {
         position: absolute;
         left: 20px;
         top: 200px;
         text-align: center;
      }

      .imgpic>button>img {
         width: 25px;
         height: 25px;
      }

      .active {
         box-shadow: 0 0 15px #00CCFF;
      }

      .color_list>button {
         height: 40px;
         width: 40px;
         border-radius: 50%;
         background-color: rgba(255, 255, 255, 0.7);
         border: 1px solid #eee;
         cursor: pointer;
         display: block;
         margin-top: 10px;
         outline: none;
      }

      .imgpic>button {
         height: 50px;
         width: 50px;
         border-radius: 50%;
         background-color: rgba(255, 255, 255, 0.7);
         border: 1px solid #eee;
         margin-top: 10px;
         outline: none;
         cursor: pointer;
      }

      .pen_list>button {
         height: 40px;
         width: 40px;
         border-radius: 50%;
         background-color: rgba(255, 255, 255, 0.7);
         border: 1px solid #eee;
         display: block;
         cursor: pointer;
         margin-top: 10px;
         outline: none;
      }

      .pen_list>button>span {
         width: 20px;
         height: 20px;
         display: inline-block;
      }


      .color_list>button>span {
         width: 20px;
         height: 20px;
         display: inline-block;
      }

      .color_list>button:nth-child(1)>span {
         background: black;
      }

      .color_list>button:nth-child(2)>span {
         background: red;
      }

      .color_list>button:nth-child(3)>span {
         background: gold;
      }


      .pen_list>button>span {
         background: black;
         border-radius: 50%;
      }

      .pen_list>button:nth-child(1)>span {
         width: 10px;
         height: 10px;
      }

      .pen_list>button:nth-child(2)>span {
         width: 15px;
         height: 15px;
      }

      .pen_list>button:nth-child(3)>span {
         height: 20px;
         width: 20px;
      }
   </style>
</head>

<body>
   <div class="select">
      <div class="imgpic">
         <button class="eraser_btn"><img id="eraser" src="./img/xiangpi1.png" alt="橡皮擦"></button>
         <button><img id="delet" src="./img/delt.png" alt="删除"></button>
         <button><img id="download" src="./img/download.png" alt="下载"></button>
      </div>

      <div class="color_list">
         <button class="active brush"><span id="black" class=" brush_color"></span></button>
         <button class="brush"><span id="red" class=" brush_color"></span></button>
         <button class="brush"><span id="gold" class=" brush_color"></span></button>
         <p>颜色</p>
      </div>
      <div class="pen_list">
         <button class="active thickness_btn"><span id="pen_one" class="thickness"></span></button>
         <button class="thickness_btn"><span id="pen_two" class="thickness"></span></button>
         <button class="thickness_btn"><span id="pen_three" class="thickness"></span></button>
         <p>笔尖</p>
      </div>

   </div>
   <canvas id="my_canvas"></canvas>


   <script>
      var brush_color = document.getElementsByClassName('brush_color');
      var brush = document.getElementsByClassName('brush');

      var thickness = document.getElementsByClassName('thickness');
      var thickness_btn = document.getElementsByClassName('thickness_btn');

      let eraser_btn = document.querySelector('.eraser_btn');

      var change_color = undefined;
      var my_canvas = document.getElementById('my_canvas');
      var my_graphics = my_canvas.getContext('2d');
      var draw_flg = false;
      var eraser_flg = false;
      var coordinate = {
         'x': undefined,
         'y': undefined
      };
      var pen_width = [
         { thickness: 5 },
         { thickness: 10 },
         { thickness: 15 }
      ];

      var pen_flg = undefined;

      window.onresize = function () {//设置canvas画布尺寸随窗口可视尺寸变化
         setcanvas()
      };

      setcanvas();

      function setcanvas() {////设置一开始canvas画布尺寸
         var canvas_size_width = document.documentElement.clientWidth;
         var canvas_size_height = document.documentElement.clientHeight;
         my_canvas.width = canvas_size_width;
         my_canvas.height = canvas_size_height;
      }

      pen_flg = pen_width[0].thickness;//设置默认笔触宽度

      for (let i = 0; i < thickness_btn.length; i++) {//设置笔触粗细
         thickness_btn[i].onclick = function () {
            for (let i = 0; i < thickness_btn.length; i++) {
               thickness_btn[i].classList.remove('active')
            }
            eraser_flg = false;
            my_canvas.style.cursor = "url('./img/eraser_ico.ico'),auto";//画笔
            eraser_img();
            pen_flg = pen_width[i].thickness;
            thickness_btn[i].classList.add('active')
         }
      }

      for (let i = 0; i < brush.length; i++) {//设置笔触颜色
         brush[i].onclick = function () {
            for (let i = 0; i < brush.length; i++) {
               brush[i].classList.remove('active')
            }
            change_color = brush_color[i].id;
            eraser_flg = false;
            my_canvas.style.cursor = "url('./img/eraser_ico.ico'),auto";//画笔
            eraser_img();
            brush[i].classList.add('active')
         }
      }

      function draw(x, y, radius) {//设置笔触
         my_graphics.beginPath();
         my_graphics.arc(x, y, radius, 0, Math.PI * 2);
         my_graphics.fillStyle = change_color;//填充颜色
         my_graphics.fill();
      }

      function draw_line(x1, y1, x2, y2) {//设置连线
         //
         my_graphics.lineCap = "round";
         my_graphics.lineJoin = "round";
         //
         my_graphics.beginPath();
         my_graphics.lineWidth = pen_flg;//连接线宽度
         my_graphics.moveTo(x1, y1);//连线起点坐标
         my_graphics.lineTo(x2, y2);//连线终点坐标
         my_graphics.strokeStyle = change_color;//连线颜色
         my_graphics.closePath();
         my_graphics.stroke();
      }
      //ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
      // 圆弧中心（圆心）的 x 轴坐标。
      // 圆弧中心（圆心）的 y 轴坐标。
      // radius圆弧的半径。
      // startAngle圆弧的起始点， x轴方向开始计算，单位以弧度表示。
      // endAngle圆弧的终点， 单位以弧度表示。
      // anticlockwise可选的Boolean值 ，如果为 true，逆时针绘制圆弧，反之，顺时针绘制。

      function eraser_img() {//设置橡皮擦不同状态图片
         if (eraser_flg === true) {
            eraser.src = './img/' + 'xiangpi.png';
            eraser_btn.classList.add('active')
            my_canvas.style.cursor = "url('./img/eraser_ico.ico'),auto";//橡皮
         } else {
            eraser.src = './img/' + 'xiangpi1.png'
            eraser_btn.classList.remove('active')
            my_canvas.style.cursor = "url('./img/pen_ico.ico'),auto";//画笔
         }
      }

      eraser.onclick = function () {
         my_canvas.style.cursor = "url('./img/eraser_ico.ico'),auto";//橡皮
         eraser_flg = true;
         draw_flg = false;
         eraser_img()
      }

      delet.onclick = function () {//删除
         my_graphics.clearRect(0, 0, my_canvas.width, my_canvas.height);
      }

      download.onclick = function () {
         var new_url = my_canvas.toDataURL('img/png');
         var a = document.createElement('a');
         document.body.appendChild(a);
         a.href = new_url;
         a.download = '我的画';
         a.click();
      }

      if (document.body.ontouchstart !== undefined) {//特性检测
         //触屏设备
         my_canvas.ontouchstart = function (target) {//触屏点击
            var target_x = target.touches[0].clientX;
            var target_y = target.touches[0].clientY;
            draw_flg = true;
            if (eraser_flg) {
               my_graphics.clearRect(target_x, target_y, 20, 20);
            } else {
               coordinate = {
                  'x': target_x,
                  'y': target_y
               }
               draw(target_x, target_y, pen_width);
            }
            //console.log(target.touches[0].clientX)
         }
         my_canvas.ontouchmove = function (target) {//触屏滑动
            var target_x = target.touches[0].clientX;
            var target_y = target.touches[0].clientY;
            var new_coordinate = {
               'x': target_x,
               'y': target_y
            }
            if (!draw_flg) {
               return;
            }
            if (eraser_flg) {
               my_graphics.clearRect(target_x, target_y, 20, 20);
            } else {
               draw(target_x, target_y, pen_width);
               draw_line(coordinate.x, coordinate.y, new_coordinate.x, new_coordinate.y);
               coordinate = new_coordinate;
            }
         }
         my_canvas.ontouchend = function () {
            draw_flg = false;
         }
      } else {
         //非触屏设备
         my_canvas.onmousedown = function (target) {//按下
            var target_x = target.clientX;
            var target_y = target.clientY;
            draw_flg = true;
            if (eraser_flg) {
               my_graphics.clearRect(target_x, target_y, 5, 5);
            } else {
               coordinate = {
                  'x': target_x,
                  'y': target_y
               }
               draw(target_x, target_y, pen_width);
            }
         }
         my_canvas.onmousemove = function (target) {//鼠标移动
            var target_x = target.clientX;
            var target_y = target.clientY;
            var new_coordinate = {
               'x': target_x,
               'y': target_y
            }
            if (!draw_flg) {//是否在画
               return;
            }
            if (eraser_flg) {
               my_graphics.clearRect(target_x, target_y, 20, 20);
            } else {
               draw(target_x, target_y, pen_width);
               draw_line(coordinate.x, coordinate.y, new_coordinate.x, new_coordinate.y);//*****
               coordinate = new_coordinate;//*****
            }
         }
         my_canvas.onmouseup = function () {//鼠标松开
            draw_flg = false;
         }
      }
   </script>
</body>

</html>
